<template>
	<view class="content">
		<view class="title">
			<u--input class="input" placeholder="搜索开课教师" shape="circle" prefixIcon="search"
				placeholderStyle="color:#303133;" v-model="value" @confirm="search">
			</u--input>

		</view>
		<view class="list" v-for="(item,index) in teachers">
			<view class="item" @click="">
				<view class="name">
					{{item.name}}   工号：{{item.username}}
				</view>
				<view class="button">
					<u-button @tap="open(index)" text="开课" type="success" size="mini"></u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api

	export default {
		data() {
			return {
				value: "",
				courseId: "",
				teachers: []
			};
		},
		onLoad(options) {
			// console.log(options["id"])
			this.courseId = options["id"]
		},
		methods: {
			search() {
				let token = uni.getStorageSync("token")
				api.searchTeacher(token, this.value).then((res) => {
					this.teachers = res.data
				}).catch((err) => {
					console.log(err)
				})
			},
			open(index) {
				// console.log(this.teachers[index])
				uni.navigateTo({
					url: `submit?courseId=${this.courseId}&teacherId=${this.teachers[index].id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.title {
			background-color: #a62618;
			padding: 30px 10px;

			.input {
				background-color: white;
			}
		}

		.list {

			.item {
				height: 60px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 10px;
				background-color: #F1F1F1;
				padding: 0px 20px;

				.name {
					width: 400px;
					font-size: 12px;

				}

				.button {
					width: 100rpx;
				}

			}
		}
	}
</style>
